<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>商户星级排行榜</span>
          <div>
            <el-button type="primary" @click="getList">刷新数据</el-button>
          </div>
        </div>
      </template>
      
      <el-table v-loading="loading" :data="merchantList" stripe>
        <el-table-column type="index" label="排名" width="80" align="center" />
        <el-table-column label="商户名称" align="center" prop="merchantName" />
        <el-table-column label="门店地址" align="center" prop="address" />
        <el-table-column label="负责人" align="center" prop="director" />
        <el-table-column label="联系电话" align="center" prop="mobile" />
        <el-table-column label="评分星级" align="center" width="200">
          <template #default="scope">
            <div class="star-rating">
              <el-rate
                v-model="scope.row.starAmount"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}星"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
            <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup name="MerchantStarRanking">
import { listMerchant } from "@/api/merchant/merchant";
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();

const loading = ref(false);
const total = ref(0);
const merchantList = ref([]);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  orderByColumn: 'starAmount',  // 按星级排序
  isAsc: 'desc'  // 降序排列
});

/** 获取商户列表并按星级排序 */
function getList() {
  loading.value = true;
  listMerchant(queryParams).then(response => {
    // 过滤掉没有星级评分的商户
    const filteredData = response.rows.filter(item => item.starAmount !== null && item.starAmount !== undefined);
    
    // 按星级降序排序
    merchantList.value = filteredData.sort((a, b) => b.starAmount - a.starAmount);
    total.value = filteredData.length;
    loading.value = false;
  });
}

/** 查看详情按钮操作 */
function handleDetail(row) {
  router.push({ path: '/merchant/detail', query: { id: row.id } });
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.star-rating {
  display: flex;
  justify-content: center;
}

.el-rate {
  display: inline-block;
}
</style> 